<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>折叠菜单</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        body {
            font-size: 14px;
        }

        ul {
            list-style: none outside;
        }

        a {
            text-decoration: none;
            color: #696969;
        }

        a:hover {
            text-decoration: none;
            color: #ff6637;
        }

        .left_nav {
            border: 1px solid #e6e6e6;
            overflow: hidden;
            margin: 30px;
            width: 190px;
        }

        .left_nav li {
            border-top: 1px dashed #e7e7e7;
        }

        left_nav li .t {
            height: 50px;
            line-height: 50px;
            padding: 0 0 0 18px;
            position: relative
        }

        .left_nav li .txt {
            padding: 0 0 0 18px;
            display: none;
            border-top: 1px dashed #e7e7e7;
        }
    </style>
    <script type="text/javascript" src="assets/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".t").click(function () {
                //返回被点击div的所有同级div并且class=txt的div
                var children = $(this).siblings(".txt");
                //使用toggle显示和隐藏
                //children.toggle();
                //如果是隐藏状态，就显示出来
                if (children.is(":hidden")) {
                    children.show();
                }
                //如果是显示状态，就隐藏起来
                else {
                    children.hide();
                }
            });
        });
    </script>
</head>

<body>
    <div class="left_nav">
        <ul>
            <li>
                <div class="t"><a href="#">图书畅销榜</a></div>
                <div class="txt">
                    <p><a href="#">我喜欢生命本来的样子</a></p>
                    <p><a href="#">雪落香杉树</a></p>
                </div>
            </li>
            <li>
                <div class="t"><a href="#">新书热卖榜</a></div>
                <div class="txt">
                    <p><a href="#">余生很长，何必慌张</a></p>
                    <p><a href="#">你那么懂事，一定很辛苦吧</a></p>
                </div>
            </li>
        </ul>
    </div>
</body>

</html>